<template>
	<view class="flex align-center justify-between">
		<view>
			<view class="flex align-end u-m-r-22">
				<text class="u-font-36 u-m-r-4 text-danger">¥</text>
				<text class="u-font-36 text-danger">{{info.goods_price}}</text>
			</view>
			<text class="t-font-24 text-greey text-through">¥ {{info.line_price || '0.00' }}</text>
		</view>
		<!-- #ifdef APP-PLUS-->
			<view v-if="details.goods_type!=5"  class="" style="height:50rpx; border:2rpx solid #fe572a; border-radius: 25rpx;display: flex;align-items: center;font-size: 22rpx;flex-direction: row;">
				<view v-if="details.goods_type==2" class="" style="width:140rpx;height:50rpx;background-color:#fe572a;border-radius: 25rpx; color: #fff;padding: 0 16rpx;display: flex;align-items: center;flex-direction: row;">
					<image :src="`/static/mine/fan.png`" style="width: 28rpx; height: 40rpx;" mode=""></image>
					<text style="color: #fff;font-size: 28rpx;">￥{{ goodsCreditData.goods_credit1 }}</text>
				</view>
				<view class="" style="height:50rpx; color: #fe572a; line-height: 50rpx;padding: 0 16rpx;font-size: 22rpx;">
					<text style="color: #fe572a;font-size: 28rpx;line-height: 50rpx;">贡献值:{{ goodsCreditData.goods_credit3 }}</text>
				</view>
				<view class="" style="height:50rpx; color: #fe572a; line-height: 50rpx;padding: 0 16rpx;">
					<text style="color: #fe572a;font-size: 28rpx;line-height: 50rpx;">权益值:{{ goodsCreditData.goods_credit5 }}</text>
				</view>
			</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
			<view v-if="details.goods_type!=5" class="flex align-center font-22" style="height:50rpx; border:2rpx solid var(--mainColor); border-radius: 25rpx">
				<view v-if="details.goods_type==2" class="u-p-x-16 flex align-center" style="height:50rpx;background-color:#fe572a;border-radius: 25rpx; color: #fff;">
					<image :src="`/static/mine/fan.png`" style="width: 28rpx; height: 40rpx;" mode=""></image>
					<view>￥{{ goodsCreditData.goods_credit1 }}</view>
				</view>
				<view class="u-p-x-16" style="height:50rpx; color: var(--mainColor); line-height: 50rpx;">
					贡献值:{{ goodsCreditData.goods_credit3 }}
				</view>
				<view class="u-p-x-16" style="height:50rpx; color: var(--mainColor); line-height: 50rpx;">
					权益值:{{ goodsCreditData.goods_credit5 }}
				</view>
			</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		name: 'goods-detail-price',
		props: {
			details: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
			}
		},
		computed: {
			info() {
				return this.details.spec && this.details.spec[0] || {}
			},
			goodsCreditData(){
				let goods_credit1 = (this.details.goods_credit1*1).toFixed(0)+'%'
				let goods_credit3 = (this.details.goods_credit3*1).toFixed(0)+'%'
				let goods_credit5 = (this.details.goods_credit5*1).toFixed(0)+'%'
				return { goods_credit1, goods_credit3, goods_credit5 }
			}
		},
		watch:{
			// details:{
			// 	handler(){
			// 		this.goodsCreditData.goods_credit1 = (this.details.goods_credit1*1).toFixed(0)+'%'
			// 		this.goodsCreditData.goods_credit3 = (this.details.goods_credit3*1).toFixed(0)+'%'
			// 		this.goodsCreditData.goods_credit5 = (this.details.goods_credit5*1).toFixed(0)+'%'
			// 		// return { goods_credit1, goods_credit3, goods_credit5 }
			// 		console.log('商品信息 this.goodsCreditData',this.goodsCreditData);
			// 	},deep:true
			// }
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
		.rights{
			height:50rpx; 
			border:2rpx solid #fe572a;
			font-size:22rpx; 
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			.icon{
				height:50rpx;
				background-color:#fe572a; 
				border-radius: 25rpx; color: #fff;
				display: flex;
				align-items: center;
				padding: 0 16rpx;
				.img{
					width: 28rpx; 
					height: 40rpx;
				}
			}
		}
</style>
